<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery_全选框</title>
		<style type = "text/css">
			*{
				margin:0;
				padding:0;
			}
			table{
				margin: 50px;
				background-color:pink;
			}
			table tr{
				height:50px;
			}
			table tr th,table tr td{
				width:80px;
				text-align:center;
			}
		</style>
		<script type = "text/javascript" src = "jquery-3.4.1.js"></script>
	</head>
	<body>
		<table border = "1" cellspacing="0">
			<thead>
				<tr>
					<th><input type="checkbox"></th>
					<th>姓名</th>
					<th>年龄</th>
					<th>爱好</th>
				</tr>
			</thead>
			
		    <tbody>
				<tr>
					<td><input type="checkbox"></td>
					<td>吴浩</td>
					<td>22</td>
					<td>唱歌</td>
				</tr>
				
				<tr>
					<td><input type="checkbox"></td>
					<td>王怡心</td>
					<td>19</td>
					<td>跳舞</td>
				</tr>
				
				<tr>
					<td><input type="checkbox"></td>
					<td>李俊</td>
					<td>21</td>
					<td>打篮球</td>
				</tr>
				
			</tbody>
			
		</table>
		<script>
			/* jQuery_全选框 */
			$("thead input").change(function(){
				var isChecked = $(this).prop("checked");
				
				$("tbody input").prop("checked",isChecked);
			})
			
			$("tbody input").change(function(){
				var allCount = $("tbody input").length;
				
				var checkCount = $("tbody input:checked").length;
				
				var isAllChecked = allCount === checkCount;
				
				$("thead input").prop("checked",isAllChecked);
			})
		</script>
	</body>
</html>
